<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">



    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>

</head>
<body>
<!--顶部导航栏-->
<div th:replace="~{commons/commons::topbar}" }></div>
<div th:replace="~{commons/commons::siderbar}" }></div>

<div class="container-fluid" id="app">
        <div class="row">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

                <!--        <div class="layui-btn-container">-->
                <!--            <button type="file" class="layui-btn layui-btn-normal" name="file" id="test8">选择文件</button>-->
                <!--            <button type="button" class="layui-btn" id="test9">开始上传</button>-->
                <!--        </div>-->
                <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showpercent="true">
                    <div class="layui-progress-bar layui-bg-cyan" lay-percent="0%"></div>
                </div>
                <br>
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-primary layui-border-cyan" id="testList">选择多文件</button>
                    <div class="layui-upload-list" style="max-width: 1000px;">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="150">
                                <col width="260">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>上传进度</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                </div>
                <div class="chartjs-size-monitor"
                     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                    <div class="chartjs-size-monitor-expand"
                         style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink"
                         style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <div>
                    <table class="layui-table" id="demo"  lay-filter="test">
                        <script type="text/html" id="toolBar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download">下载</a>
                            <a class="layui-btn layui-btn-primary layui-border-cyan layui-btn-xs" lay-event="share">分享</a>
                            <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="delete">删除</a>
                        </script>
                    </table>
                </div>
            </main>
        </div>

</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/main.js}" charset="utf-8"></script>
</body>
</html>
